{% extends "base.html" %}

{% block title %}关于项目{% endblock %}

{% block head %}
<style>
/* 液态玻璃页面标题 */
.page-title {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}

.page-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.page-title h1 {
    color: #1C1C1E !important;
    text-shadow: 0 2px 4px rgba(0, 122, 255, 0.1);
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

.page-title p {
    color: #666 !important;
    position: relative;
    z-index: 1;
    margin: 0.5rem 0 0 0;
    font-size: 1.1rem;
}

/* 液态玻璃卡片 */
.about-card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem !important;
}

.about-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

.about-card-header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    padding: 1.5rem 2rem !important;
    position: relative;
    z-index: 1;
}

.about-card-header h3 {
    color: #1C1C1E !important;
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    margin: 0 !important;
}

.about-card-body {
    position: relative;
    z-index: 1;
    color: #1C1C1E !important;
    padding: 2rem !important;
}

/* 功能列表 */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
}

.feature-list li:last-child {
    border-bottom: none;
}

.feature-list li i {
    color: #3498db;
    margin-right: 1rem;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* 架构图 */
.architecture-diagram {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin: 1rem 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.architecture-layer {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin: 0.5rem 0;
    border-left: 4px solid #3498db;
}

.architecture-layer h5 {
    margin: 0 0 0.5rem 0;
    color: #1C1C1E !important;
    font-weight: 600;
}

.architecture-layer p {
    margin: 0;
    color: #666 !important;
    font-size: 0.9rem;
}

/* 联系信息 */
.contact-info {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-info:last-child {
    border-bottom: none;
}

.contact-info i {
    color: #3498db;
    margin-right: 1rem;
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.contact-info .contact-details {
    flex: 1;
}

.contact-info .contact-label {
    font-weight: 600;
    color: #1C1C1E !important;
    margin-bottom: 0.25rem;
}

.contact-info .contact-value {
    color: #666 !important;
    text-decoration: none;
}

.contact-info .contact-value:hover {
    color: #3498db !important;
}

/* 项目统计 */
.project-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.stat-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.stat-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #3498db !important;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #666 !important;
    font-size: 0.9rem;
}

/* 暗色模式适配 */
body[data-theme="dark"] .page-title,
html[data-theme="dark"] .page-title {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body[data-theme="dark"] .page-title::before,
html[data-theme="dark"] .page-title::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%) !important;
}

body[data-theme="dark"] .page-title h1,
html[data-theme="dark"] .page-title h1 {
    color: #ffffff !important;
}

body[data-theme="dark"] .page-title p,
html[data-theme="dark"] .page-title p {
    color: #bdc3c7 !important;
}

body[data-theme="dark"] .about-card,
html[data-theme="dark"] .about-card {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body[data-theme="dark"] .about-card::before,
html[data-theme="dark"] .about-card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%) !important;
}

body[data-theme="dark"] .about-card-header,
html[data-theme="dark"] .about-card-header {
    background: rgba(0, 0, 0, 0.2) !important;
}

body[data-theme="dark"] .about-card-header h3,
html[data-theme="dark"] .about-card-header h3 {
    color: #ffffff !important;
}

body[data-theme="dark"] .about-card-body,
html[data-theme="dark"] .about-card-body {
    color: #ffffff !important;
}

body[data-theme="dark"] .feature-list li,
html[data-theme="dark"] .feature-list li {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body[data-theme="dark"] .architecture-diagram,
html[data-theme="dark"] .architecture-diagram {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body[data-theme="dark"] .architecture-layer,
html[data-theme="dark"] .architecture-layer {
    background: rgba(0, 0, 0, 0.2) !important;
}

body[data-theme="dark"] .architecture-layer h5,
html[data-theme="dark"] .architecture-layer h5 {
    color: #ffffff !important;
}

body[data-theme="dark"] .architecture-layer p,
html[data-theme="dark"] .architecture-layer p {
    color: #bdc3c7 !important;
}

body[data-theme="dark"] .contact-info,
html[data-theme="dark"] .contact-info {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body[data-theme="dark"] .contact-info .contact-label,
html[data-theme="dark"] .contact-info .contact-label {
    color: #ffffff !important;
}

body[data-theme="dark"] .contact-info .contact-value,
html[data-theme="dark"] .contact-info .contact-value {
    color: #bdc3c7 !important;
}

body[data-theme="dark"] .stat-item,
html[data-theme="dark"] .stat-item {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body[data-theme="dark"] .stat-label,
html[data-theme="dark"] .stat-label {
    color: #bdc3c7 !important;
}
</style>
{% endblock %}

{% block content %}
<!-- 页面标题 -->
<div class="page-title">
    <h1><i class="fas fa-info-circle me-2"></i>关于项目</h1>
    <p>定时任务管理平台 - 一个现代化的任务调度和管理系统</p>
</div>

<!-- 项目简介 -->
<div class="about-card">
    <div class="about-card-header">
        <h3><i class="fas fa-book me-2"></i>项目简介</h3>
    </div>
    <div class="about-card-body">
        <p>定时任务管理平台是一个基于微服务架构的现代化任务调度和管理系统。该系统提供了完整的任务管理功能，包括钉钉消息推送、用户自定义脚本执行、依赖项管理等功能。</p>
        <p>系统采用Docker容器化部署，服务组件解耦，具有高可用性和可扩展性，适合大规模部署场景。前端采用现代化的液态玻璃UI设计，支持明暗主题切换，提供了良好的用户体验。同时具备完善的权限管理、日志记录和监控功能，确保系统的安全性和可靠性。</p>
    </div>
</div>

<!-- 项目统计 -->
<div class="about-card">
    <div class="about-card-header">
        <h3><i class="fas fa-chart-bar me-2"></i>项目统计</h3>
    </div>
    <div class="about-card-body">
        <div class="project-stats">
            <div class="stat-item">
                <div class="stat-number">4</div>
                <div class="stat-label">微服务组件</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">10+</div>
                <div class="stat-label">功能特性</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">5+</div>
                <div class="stat-label">技术栈</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">100%</div>
                <div class="stat-label">响应式设计</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">高</div>
                <div class="stat-label">可扩展性</div>
            </div>
        </div>
    </div>
</div>

<!-- 主要功能 -->
<div class="about-card">
    <div class="about-card-header">
        <h3><i class="fas fa-cogs me-2"></i>主要功能</h3>
    </div>
    <div class="about-card-body">
        <ul class="feature-list">
            <li>
                <i class="fas fa-network-wired"></i>
                <div>
                    <strong>微服务架构</strong> - 基于Docker的微服务架构，服务解耦，高可用性
                </div>
            </li>
            <li>
                <i class="fas fa-robot"></i>
                <div>
                    <strong>钉钉机器人管理</strong> - 支持钉钉机器人的创建、配置和消息推送
                </div>
            </li>
            <li>
                <i class="fas fa-code"></i>
                <div>
                    <strong>脚本管理</strong> - 支持Python脚本的上传、编辑和执行
                </div>
            </li>
            <li>
                <i class="fas fa-clock"></i>
                <div>
                    <strong>定时任务调度</strong> - 基于独立APScheduler服务的任务调度系统
                </div>
            </li>
            <li>
                <i class="fas fa-users"></i>
                <div>
                    <strong>用户权限管理</strong> - 完整的用户注册、登录和权限控制
                </div>
            </li>
            <li>
                <i class="fas fa-boxes"></i>
                <div>
                    <strong>依赖项管理</strong> - Python包的管理、安装和更新
                </div>
            </li>
            <li>
                <i class="fas fa-chart-line"></i>
                <div>
                    <strong>实时监控</strong> - 系统资源和任务执行状态的实时监控
                </div>
            </li>
            <li>
                <i class="fas fa-history"></i>
                <div>
                    <strong>日志记录</strong> - 完整的操作日志和执行日志记录
                </div>
            </li>
            <li>
                <i class="fas fa-palette"></i>
                <div>
                    <strong>主题切换</strong> - 支持明暗主题切换的现代化UI
                </div>
            </li>
            <li>
                <i class="fas fa-server"></i>
                <div>
                    <strong>服务健康检查</strong> - 微服务组件的健康状态监控
                </div>
            </li>
        </ul>
    </div>
</div>

<!-- 项目架构 -->
<div class="about-card">
    <div class="about-card-header">
        <h3><i class="fas fa-sitemap me-2"></i>项目架构</h3>
    </div>
    <div class="about-card-body">
        <div class="architecture-diagram">
            <div class="architecture-layer">
                <h5><i class="fas fa-desktop me-2"></i>表现层 (Presentation Layer)</h5>
                <p>基于Bootstrap 5的响应式Web界面，支持液态玻璃效果和主题切换</p>
            </div>
            <div class="architecture-layer">
                <h5><i class="fas fa-network-wired me-2"></i>微服务架构 (Microservices Architecture)</h5>
                <p>基于Docker的微服务架构，服务解耦，高可用性，适合大规模部署</p>
            </div>
            <div class="architecture-layer">
                <h5><i class="fas fa-database me-2"></i>数据层 (Data Layer)</h5>
                <p>SQLAlchemy ORM + SQLite数据库，实现数据持久化和关系映射</p>
            </div>
            <div class="architecture-layer">
                <h5><i class="fas fa-cogs me-2"></i>服务层 (Service Layer)</h5>
                <p>分布式服务组件，包括Web前端服务、调度器服务、执行器服务和监控服务</p>
            </div>
        </div>
        
        <h5 class="mt-4"><i class="fas fa-cubes me-2"></i>微服务组件</h5>
        <ul class="feature-list">
            <li>
                <i class="fas fa-globe"></i>
                <div>
                    <strong>Web前端服务 (端口: 8080)</strong> - 用户界面和API网关，处理用户认证、权限管理和请求转发
                </div>
            </li>
            <li>
                <i class="fas fa-calendar-alt"></i>
                <div>
                    <strong>调度器服务 (端口: 5001)</strong> - 独立APScheduler服务，负责任务调度管理和配置热重载
                </div>
            </li>
            <li>
                <i class="fas fa-play-circle"></i>
                <div>
                    <strong>执行器服务 (端口: 5002)</strong> - 独立的任务执行服务，负责执行脚本、发送钉钉消息和管理任务日志
                </div>
            </li>
            <li>
                <i class="fas fa-chart-line"></i>
                <div>
                    <strong>监控服务</strong> - 资源监控服务，负责监控系统资源使用情况并发送告警
                </div>
            </li>
        </ul>
        
        <h5 class="mt-4"><i class="fas fa-tools me-2"></i>技术栈</h5>
        <ul class="feature-list">
            <li><i class="fas fa-python"></i><strong>后端框架：</strong>Flask + SQLAlchemy + APScheduler</li>
            <li><i class="fas fa-html5"></i><strong>前端技术：</strong>Bootstrap 5 + jQuery + Font Awesome</li>
            <li><i class="fas fa-database"></i><strong>数据库：</strong>SQLite + Alembic (数据库迁移)</li>
            <li><i class="fas fa-shield-alt"></i><strong>安全：</strong>Flask-Login + 密码加密 + CSRF保护</li>
            <li><i class="fab fa-docker"></i><strong>部署技术：</strong>Docker + Docker Compose</li>
        </ul>
    </div>
</div>

<!-- 项目地址和联系方式 -->
<div class="about-card">
    <div class="about-card-header">
        <h3><i class="fas fa-link me-2"></i>项目地址和联系方式</h3>
    </div>
    <div class="about-card-body">
                 <div class="contact-info">
             <i class="fab fa-git-alt"></i>
             <div class="contact-details">
                 <div class="contact-label">Gitee 仓库</div>
                 <a href="https://gitee.com/xbyzzz1/scheduled-task-management-platform" class="contact-value" target="_blank">
                     https://gitee.com/xbyzzz1/scheduled-task-management-platform
                 </a>
             </div>
         </div>
        
        <div class="contact-info">
            <i class="fas fa-user"></i>
            <div class="contact-details">
                <div class="contact-label">作者</div>
                <div class="contact-value">玄月十七 (xuboyang)</div>
            </div>
        </div>
        
                 <div class="contact-info">
             <i class="fas fa-envelope"></i>
             <div class="contact-details">
                 <div class="contact-label">邮箱</div>
                 <a href="mailto:xbyzzz0917@163.com" class="contact-value">xbyzzz0917@163.com</a>
             </div>
         </div>
        
        
        
        <div class="contact-info">
            <i class="fas fa-code-branch"></i>
            <div class="contact-details">
                <div class="contact-label">版本</div>
                <div class="contact-value">v2.0.0 (微服务架构)</div>
            </div>
        </div>
        
        <div class="contact-info">
            <i class="fas fa-license"></i>
            <div class="contact-details">
                <div class="contact-label">开源协议</div>
                <div class="contact-value">MIT License</div>
            </div>
        </div>
    </div>
</div>
{% endblock %}